<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
</head>
<body>
    <h1>Hello SpringMVC</h1>
    <a th:href="@{/target}">访问目标页面target.html</a>
    <br>
    <a th:href="@{/hello/testRequestMapping}">测试RequestMapping注解的位置</a>
    <br>
    <a th:href="@{/test}">测试RequestMapping注解的Value属性----》/test</a>
    <br>
    <a th:href="@{/test}">测试RequestMapping注解的Value属性----》/testRequestMapping</a>
    <br>
    <a th:href="@{/test}">测试RequestMapping注解的method属性----》get</a>
    <br>
    <form th:action="@{/test}" method="post">
        <input type="submit" value="测试RequestMapping注解的method属性-----》post">
    </form>
<!--    form表单支支持get 和 post两种请求方式，默认按get请求提交-->
    <form th:action="@{/testPut}" method="put">
        <input type="submit" value="测试from表单是否能够发送put请求或delete请求方式">
    </form>
    <br>
    <a th:href="@{/testRequestMapping(username='admin',password=123456)}">测试RequestMapping注解的params属性---》testRequestMapping</a>
    <br>
    <a th:href="@{/testRequestMapping(username='admin',password=123456)}">测试RequestMapping注解的headers---》testRequestMapping</a>
    <br>
    <a th:href="@{/a1a/testAnt}">测试@RequestMapping可以匹配ant风格的路径---》使用?</a>
    <br>
    <a th:href="@{/a1a/testAnt}">测试@RequestMapping可以匹配ant风格的路径---》使用*</a>
    <br>
    <a th:href="@{/a1a/testAnt}">测试@RequestMapping可以匹配ant风格的路径---》使用**</a>
    <br>
    <a th:href="@{/testPath/1}">测试@RequestMapping支持路径中的占位符---》testPath</a>
    <br>
<!--    测试Request域中共享数据-->
    <a th:href="@{/testRequestByServletAPI}">通过servletAPI向Request域中共享数据</a>
    <br>
    <a th:href="@{/testModelAndView}">通过servletAPI向ModelAndView域中共享数据</a>
    <br>
    <a th:href="@{/testModel}">通过servletAPI向Model域中共享数据</a>
    <br>
    <a th:href="@{/testMap}">通过servletAPI向Map集合域中共享数据</a>
    <br>
    <a th:href="@{/testModelMap}">通过servletAPI向ModelMap集合域中共享数据</a>
    <br>
    <a th:href="@{/testSession}">通过servletAPI向Session域中共享数据</a>
    <br>
    <a th:href="@{/testApplication}">通过servletAPI向Application域中共享数据</a>
    <br> 
    <hr>
    <form th:action="@{/testRequestBody}" method="post">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="submit" value="测试@RequestBody">
    </form>

    <form th:action="@{/testRequestEntity}" method="post">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="submit" value="测试RequestEntity">
    </form>
    <a th:href="@{/testResponse}">通过servletAPI的response对象响应浏览器数据</a> <br>
    <a th:href="@{/testResponseBody}">通过@ResponseBody响应浏览器数据</a>  <br>
    <a th:href="@{/testResponseUser}">通过@ResponseBody响应浏览器User对象</a>
    <hr>
    <div id="app">
        <a @click="testAxios" th:href="@{/testAxios}">SpringMVC处理ajax</a>    
    </div>
    <script type="text/javascript" th:src="@{/static/js/vue.js}"></script>
    <script type="text/javascript" th:src="@{/static/js/axios.min.js}"></script>
    
    <script type="text/javascript">
        new Vue({
            el:"#app",
            methods:{
                testAxios:function (event){
                    axios({
                        method: "post",
                        url: event.target.href,
                        params:{
                            username:"admin",
                            password:"admin"
                        }
                    }).then(function (res){
                        alert(res.data);
                    });
                    //取消超链接的默认行为
                    event.preventDefault()
                }
            }
        })
    </script>
    <hr>
    <a th:href="@{/testInterceptor}">测试拦截器</a> <br>
    <a th:href="@{/testExceptionHandler}">测试异常处理</a> <br>
</body>
</html>